<template>
  <main>
    <header>
      <h2>实现 移动端国家选择页面</h2>
    </header>
    <section>
      <p><strong>实现以下效果和逻辑：</strong></p>
      <p>根据提供的接口，实现以下页面，实现搜索功能，实现右侧触摸定位功能。</p>
      <p>注意事项：只用确保移动端可以完美展示即可，可以使用已掌握的任何技术，保持思路清晰和代码风格一致。保持 DOM 的结构的简洁高效，尽可能优化性能。</p>
      <article>
        <p>数据接口地址：http://192.168.0.67:4455/api/getCountryList</p>
        <p>请求方式：GET</p>
        <router-link to="/country-selector/preview">
          <button>预览效果（移动端）</button>
        </router-link>
      </article>
    </section>

  </main>
</template>

<script>
export default {
  methods: {

  }
}
</script>


<style scoped>
section {
  flex: auto;
  padding: 0 8vw;
  text-align: left;
}
article {
  margin-top: 80px;
}

button {
  font-size: 15px;
  background-color: #25a5e0;
  color: #fff;
  border: none;
  padding: 8px 10px;
  text-align: center;
  min-width: 5em;
  cursor: pointer;
}
</style>

